<template>
  <div class="component-hotSearch-add-or-update">
    <el-dialog
      v-model="visible"
      :title="$t('distributionMsg.statusModification')"
      :close-on-click-modal="false"
      width="620px"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        :rules="dataRule"
        label-width="80px"
        @submit.prevent
        @keyup.enter="onSubmit()"
      >
        <el-form-item
          :label="$t('product.status')"
          prop="state"
        >
          <el-radio-group v-model="dataForm.state">
            <el-radio :label="1">
              {{ $t('publics.normal') }}
            </el-radio>
            <el-radio :label="2">
              {{ $t('distribUserWallet.ban') }}
            </el-radio>
            <el-radio :label="-1">
              {{ $t('distribUserWallet.perBan') }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          v-if="dataForm.state != 0 && dataForm.state != 1"
          :label="$t('home.reasons')"
          prop="banReason"
        >
          <el-select
            v-model="dataForm.banReason"
          >
            <el-option
              :label="$t('distribUserWallet.lostContact')"
              :value="0"
            />
            <el-option
              :label="$t('distribUserWallet.maliciousSwipe')"
              :value="1"
            />
            <el-option
              :label="$t('prodList.other')"
              :value="2"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          :label="$t('publics.remark')"
          prop="remarks"
        >
          <el-input
            v-model="dataForm.remarks"
            type="textarea"
            rows="5"
            :placeholder="$t('publics.remark')"
            maxlength="250"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div
            class="default-btn"
            @click="visible = false"
          >
            {{ $t('remindPop.cancel') }}
          </div>
          <div
            class="default-btn primary-btn"
            @click="openCheck()"
          >
            {{ $t('remindPop.confirm') }}
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
const emit = defineEmits(['refreshDataList'])
const dataRule = {
  state: [
    { required: true, message: $t('distributionMsg.statusTip1'), trigger: 'change' }
  ],
  banReason: [
    { required: true, message: $t('distributionMsg.tip3'), trigger: 'blur' }
  ],
  remarks: [
    { max: 255, message: $t('recruit.limitLangTip2'), trigger: 'blur' }
  ]
}

const dataForm = ref({
  distributionUserId: null,
  state: 0,
  banReason: 0,
  remarks: ''
})
const visible = ref(false)
const init = (data) => {
  visible.value = true
  dataForm.value = Object.assign(dataForm.value, data)
}
defineExpose({ init })

/**
 * 表单提交
 */
const onSubmit = () => {
  http({
    url: http.adornUrl('/distribution/distributionUser/state'),
    method: 'put',
    data: http.adornData({
      distributionUserId: dataForm.value.distributionUserId,
      state: dataForm.value.state,
      banReason: dataForm.value.state !== 1 ? dataForm.value.banReason : '',
      remarks: dataForm.value.remarks
    })
  })
    .then(() => {
      ElMessage({
        message: $t('publics.operation'),
        type: 'success',
        duration: 1500,
        onClose: () => {
          visible.value = false
          emit('refreshDataList')
        }
      })
    })
}
const openCheck = () => {
  if (dataForm.value.state === -1) {
    ElMessageBox.confirm($t('distribution.banTip1'), $t('remindPop.remind'), {
      confirmButtonText: $t('remindPop.confirm'),
      cancelButtonText: $t('remindPop.cancel'),
      type: 'warning'
    }).then(() => {
      onSubmit()
    })
  } else if (dataForm.value.state === 2) {
    ElMessageBox.confirm($t('distribution.banTip2'), $t('remindPop.remind'), {
      confirmButtonText: $t('remindPop.confirm'),
      cancelButtonText: $t('remindPop.cancel'),
      type: 'warning'
    }).then(() => {
      onSubmit()
    })
  } else if (dataForm.value.state === 1) {
    onSubmit()
  }
}

</script>
